<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      title="双选会报名"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="search"
    >
      <template #custom-left>
	        <a-input v-model="queryForm.title" placeholder="请输入主题" allow-clear @change="search">
	          <template #prefix><icon-search /></template>
	        </a-input>
        <a-select v-model="queryForm.status" placeholder="请选择状态" @change="search">
          <a-option :value="0">未开始</a-option>
          <a-option :value="1">进行中</a-option>
          <a-option :value="2">已结束</a-option>
        </a-select>
        <a-button @click="reset">重置</a-button>
      </template>
      <template #status="{ record }">
        <a-tag v-if="record.status === 0" color="orange">未开始</a-tag>
        <a-tag v-if="record.status === 1" color="green">进行中</a-tag>
        <a-tag v-if="record.status === 2" color="red">已结束</a-tag>
      </template>
      <template #name="{ record }">
        <a-link @click="onDetail(record)">{{ record.name }}</a-link>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link @click="searchCompany(record.id)">查看参会企业</a-link>
          <a-link  @click="studentApply(record.id)">学生报名</a-link>
          <a-link  @click="companyApply(record.id)">企业报名</a-link>
        </a-space>
      </template>
    </GiTable>
    <JobfairDetailDrawer ref="JobfairDetailDrawerRef" />
  </div>
</template>

<script setup lang="ts">
import JobfairDetailDrawer from './JobfairDetailDrawer.vue'
import { type JobfairResp, type JobfairQuery, listJobfair, companySignUp } from '@/apis'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import { useTable } from '@/hooks'
import { isMobile } from '@/utils'
import has from '@/utils/has'
import {Message} from "@arco-design/web-vue";
import router from "@/router";
import path from "node:path";

defineOptions({ name: 'Jobfair' })

const queryForm = reactive<JobfairQuery>({
  title: "",
  status: "",
  sort: ['createTime,desc']
})


const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable((page) => listJobfair({ ...queryForm, ...page }), { immediate: true })

const columns: TableInstanceColumns[] = [
  { title: '主题', dataIndex: 'title', slotName: 'title' },
  { title: '开始时间', dataIndex: 'startDate', slotName: 'startDate' },
  { title: '结束时间', dataIndex: 'endDate', slotName: 'endDate' },
  { title: '地点', dataIndex: 'location', slotName: 'location' },
  { title: '状态', dataIndex: 'status', slotName: 'status' },
  {
    title: '操作',
    slotName: 'action',
    width: 300,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
  }
]

// 重置查询表单并搜索
const reset = () => {
  queryForm.title = ""
  queryForm.status = ""
  search()
}

// 查询参会企业
const searchCompany = async (jobfairId: string) => {
  // 先跳转到企业列表界面（企业信息），再通过双选会id查询参会企业，返回企业名称
  // todo 扩展： 返回企业招聘岗位数量等信息
  router.push({
    path: 'jobfairCompany',
    query: { jobfairId }
    }
  )
}

// 学生报名
const studentApply = async (jobfairId: string) => {
  // todo
}

// 企业报名
const companyApply = async (jobfairId: string) => {
  const res = await companySignUp(jobfairId)
  if(res.code === 200){
    Message.success(res.msg)
    // todo 跳转到岗位管理界面
    const id = res.data as string
    await router.push({
      path: '/hrPositionManage',
      query: {jobfairId: jobfairId, companyId: id},
    })
  } else {
    Message.error(res.msg)
  }
}

const JobfairDetailDrawerRef = ref<InstanceType<typeof JobfairDetailDrawer>>()
// 详情
const onDetail = (item: JobfairResp) => {
  JobfairDetailDrawerRef.value?.onDetail(item.id)
}
</script>

<style lang="scss" scoped></style>
